<template>
	<custom-navbar title="我的" bgColor="#fff" textColor="#333" :showBack="false">
	</custom-navbar>
	<view class="container my-container">
		<view class="userInfo-cls baseLayout">
			<!-- 背景图片 -->
			<view class="bg-avatar-cls">
				<uni-file-picker v-model="avatarUrl" :sourceType="sourceType" fileMediatype="image" mode="grid"
					:image-styles="imageStyles" @select="select" :limit="1" return-type="object"
					@delete="deleteHandler" />
			</view>
			<view class="user-baseInfo-cls" @click="useRouter('/pages/updateUserInfo/updateUserInfo')">
				<view class="info-cls">昵称：{{userInfo.nickName}}</view>
				<view class="info-cls">电话：{{userInfo.phonenumber}}</view>
				<view class="info-cls" v-if='userInfo?.email'>邮箱：{{userInfo.email}}</view>
			</view>
		</view>
		<view class="module-cls baseLayout">
			<view class="module-2-cls" @click="useRouter('/pages/beseInfo/beseInfo')">基本信息</view>
		</view>
		<view class="link-cls baseLayout">
			<view class="module-2-cls" @click="useRouter('/pages/updatePsd/updatePsd')">密码修改</view>
		</view>
		<view class="link-cls baseLayout">
			<view class="module-2-cls" @click="useRouter('/pages/joinVoteList/joinVoteList')">我参与的投票</view>
		</view>

		<view class="link-cls baseLayout" @click="logoutHandler">
			<view class="module-2-cls">退出登录</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		ref,
		unref,
		defineExpose,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		toast,
		useRouter,
		clearStorageSync,
		getStorageSync,
		setStorageSync,
		chooseImg,
		uploadPic

	} from '@/utils/index.js'
	import {
		getInfo,
	} from '@/api/userInfo.js'
	import {
		BASE_URL
	} from '@/config/index.js'

	let temFilePath = ref('')
	let avatarUrl = ref([])
	const imageStyles = ref({
		width: 100,
		height: 100
	})
	let currentUser = ref({})
	const userInfo = ref({})
	const initData = () => {
		currentUser.value = getStorageSync("currentUser")
		if (!currentUser) {
			clearStorageSync()
			useRouter('/pages/login/login', 'reLaunch')
		}
		getInfo().then(res => {
			userInfo.value=res.user
			if (userInfo.value?.avatar) {
				const _avatarUrl = `${BASE_URL}${userInfo.value?.avatar}`
				let _imgName = userInfo.value?.avatar
				avatarUrl.value = [{
					name: _imgName.substring(_imgName.lastIndexOf('/') + 1),
					url: _avatarUrl,
					extname: _imgName.split('.')[1]
				}]
			}
		})

	}
	const sourceType = ref(['album', 'camera'])
	// 获取上传状态
	const select = async (e) => {
		const result = await uploadPic(e, {})
		if (result.isSuccess) {
			userInfo.value.avatarUrl = `${BASE_URL}${result.data.imgUrl}`;
			setStorageSync("currentUser", userInfo.value)
		}
	}
	const deleteHandler = (e) => {
		avatarUrl.value = []
	}

	const logoutHandler = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出吗',
			success: function(res) {
				if (res.confirm) {
					clearStorageSync()
					useRouter('/pages/login/login', 'reLaunch')
				} else if (res.cancel) {}
			}
		});

	}
	defineExpose({
		initData
	})
	// 计算内容区顶部距离（状态栏高度 + 导航栏高度）
	onMounted(() => {
		initData()
	});
</script>

<style scoped lang="less">
	.my-container {
		padding-top: 64px;
		box-sizing: border-box;

		.bg-avatar-cls {
			background: #fff;
			border-radius: 5px;
			padding: 30rpx;
			height: auto;
		}

		.baseLayout {
			background-color: #fff;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
		}

		.module-1-cls {
			border-bottom: 1px solid #f4f5f7;
		}

		.module-2-cls {
			height: 100rpx;
			display: flex;
			align-items: center;
		}

		.link-cls {
			margin-top: 20rpx;
		}

		.userInfo-cls {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.bg-cls {
				display: flex;
				align-items: center;
			}

			.user-baseInfo-cls {
				width: calc(100% - 150rpx);

				.info-cls {
					width: 100%;
					padding: 6rpx 0;
					box-sizing: border-box;
					word-break: break-all;
				}
			}
		}

	}
</style>